<script setup lang="ts">
import { type FormInstance, Message } from '@arco-design/web-vue'
import { useForm } from '@/hooks'
import { ConfigApi } from '@/apis'
import { useAppStore } from '@/stores'

const category = 'notify.sms'
const loading = ref(false)
const readonly = ref(true)
const config = ref()
const formRef = ref<FormInstance>()

const { form } = useForm({
  'notify.sms.accessKeyId': '',
  'notify.sms.accessKeySecret': '',
  'notify.sms.signature': '',
  'notify.sms.sdkAppId': '',
})

const rules: FormInstance['rules'] = {
  // 'website.title': [{ required: true, match: Regexp.Name, message: '名称只能含有中文、数字、英文、下划线、短横线，长度为2-32位' }],
}

// 重置
const reset = () => {
  formRef.value?.resetFields()
  for (const key in form) {
    form[key] = config.value?.[key]
  }
}

// 编辑
const onEdit = () => {
  readonly.value = false
}

// 取消
const onCancel = () => {
  readonly.value = true
  reset()
}

// 保存
const onSave = async () => {
  const isInvalid = await formRef.value?.validate()
  if (isInvalid) {
    return false
  }

  await ConfigApi.updateConfigMap(form)
  Message.success('修改成功')
  useAppStore().initWebsiteConfig()
  readonly.value = true
}

// 查询详情
const getConfig = async () => {
  loading.value = true
  ConfigApi.listMapByCategory(category).then((res) => {
    config.value = res
    reset()
  }).finally(() => {
    loading.value = false
  })
}

onMounted(async () => {
  getConfig()
})
</script>

<template>
  <a-card :loading title="配置信息" class="section">
    <a-form ref="formRef" layout="vertical" :model="form" :rules :readonly :style="{ width: '600px' }">
      <readonly-form-item label="短信accessKeyId" field="'notify.sms.accessKeyId'" :span="24">
        <a-input v-model.trim="form['notify.sms.accessKeyId']" />
      </readonly-form-item>
      <readonly-form-item label="短信accessKeySecret" field="'notify.sms.accessKeySecret'" :span="24">
        <a-input v-model.trim="form['notify.sms.accessKeySecret']" />
      </readonly-form-item>
      <readonly-form-item label="短信签名" field="'notify.sms.signature'" :span="24">
        <a-input v-model.trim="form['notify.sms.signature']" />
      </readonly-form-item>
      <readonly-form-item label="短信appId" field="'notify.sms.sdkAppId'" :span="24">
        <a-input v-model.trim="form['notify.sms.sdkAppId']" />
      </readonly-form-item>
    </a-form>
    <template #extra>
      <ReadonlyEditButton
        :readonly="readonly"
        :deleteable="false"
        @edit="onEdit"
        @cancel="onCancel"
        @save="onSave"
      >
        <!-- <template #extra>
          <a-button class="btn" type="text" size="small">
            <template #icon>
              <icon-record />
            </template>
            恢复默认
          </a-button>
        </template> -->
      </ReadonlyEditButton>
    </template>
  </a-card>
</template>

<style lang="less" scoped>
.section > .arco-card-header {
  padding-top: 0 !important;
}
:deep(.arco-card) {
  .arco-card-header {
    padding-top: 0 !important;
  }
}
:deep(.section > .arco-card-header) {
  padding-top: 0 !important;
}
</style>
